<!-- 新增收货地址 -->
<template>
	<view>
		<u-navbar :isFixed="false" title="新增收货地址" :borderBottom="false"></u-navbar>
		<view class="item flex_align">
			<view class="name">收货人</view>
			<input type="text" v-model="username" placeholder="请填写收货人姓名">
		</view>
		<view class="item flex_align">
			<view class="name">手机号</view>
			<input type="number" maxlength="11" v-model="mobile" placeholder="请填写手机号">
		</view>
		<view class="item flex_align">
			<view class="name">收货地址</view>
			<picker @change="setatlas" :range="array" mode="region" class="value" :value="array">
				<view class="flex_bet_align value">
				   <text class="uni-input">{{array[0]}} {{array[1]}} {{array[2]}}</text>
					<text class="iconfont icon-xwtubiaoku-03"></text>
				</view>
			</picker>
		</view>
		<view class="item flex_align">
			<view class="name">详细地址</view>
			<view class="value">街道、门牌号、小区</view>
		</view>
		<textarea v-model="address" placeholder-style="line-height: 60rpx;" placeholder="请填写详细地址，不少于5个字" />
		<view class="block"></view>
		<view class="item flex_bet_align">
			<view class="name">设为默认</view>
			<u-checkbox active-colo="#007AFF" v-model="checked" shape="circle" @change="checkboxChange"/>
		</view>
		<view style="height:135rpx;"></view>
		<view class="btn" @click="submits">保存</view>
	</view>
</template>

<script>
	import amapFile from "../static/js/amap-wx.js"
	import App from '@/App.vue';
	var _this;
	export default {
		data() {
			return {
				checked:false,
				array: ["四川省","成都市","武侯区"],
				address:"",
				username:"",
				mobile:"",
				is_default:2,
				id:-1,
			}
		},
		onLoad(options) {
			_this = this
			  // 是否属于修改地址
			if (options.id) {
				_this.$api.get("findaddress", {detail_id:options.id}).then(data => {
					_this.array=[data.province, data.city, data.area]
					_this.username=data.username
					_this.mobile=data.mobile
					_this.address=data.address
					_this.is_default=data.is_default
					_this.checked=data.is_default==1
					_this.id=options.id
				});
			} else {
				_this.getuserLocation()
			}
		},
		methods: {
			// 设为默认
			checkboxChange(e){
				_this.is_default=e.value?1:2
			},
			// 切换城市
			setatlas(e){
				_this.array=e.detail.value
			},
			// 后去当前位置
			getuserLocation() {
				// 高德地图获取当前定位
				new amapFile.AMapWX({
					key: App.mapkey
				}).getRegeo({
					success: function(data) {
						let Component=data[0].regeocodeData.addressComponent
						_this.array=[Component.province, Component.city!=""?Component.city:Component.province, Component.district]
						_this.address=data[0].name
					}
				})
				
			},
			// 提交
			submits(){
				let phonezz = /^1[0-9]{10}$/;
				if(_this.username.length<1){
					wx.showToast({
						title:"请输入收货人姓名",
						icon:"none"
					})
				}else if(_this.mobile.length<1){
					wx.showToast({
						title:"请输入手机号",
						icon:"none"
					})
				}else if(!phonezz.test(parseInt(_this.mobile))){
					wx.showToast({
						title:"手机号格式有误",
						icon:"none"
					})
				}else if(_this.address.length<1){
					wx.showToast({
						title:"请输入详细地址",
						icon:"none"
					})
				}else{
					let data={}
					data.mobile=_this.mobile
					data.address=_this.address
					data.username=_this.username
					data.province=_this.array[0]
					data.city=_this.array[1]
					data.area=_this.array[2]
					data.is_default=_this.is_default
					if(_this.id>0){
						data.opt_type=2
						data.id=_this.id
					}else{
						data.opt_type=1
					}
					_this.$api.post("addaddress", data).then(data => {
						wx.showToast({
							title:_this.id>0?'修改成功':'添加成功'
						})
						_this.$plug.isonshow(2)
						setTimeout(function(){wx.navigateBack({delta: 1})},1000);
						
					});
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background:#eeeeee;
	}
	.item{
		background-color: #FFFFFF;
		height: 125rpx;
		line-height: 125rpx;
		padding: 0 40rpx;
		border-bottom:1rpx solid #EEEEEE;
		.name{
			width:215rpx;
			text-align: left;
			font-size: 30rpx;
			font-family: PingFang SC, PingFang SC-Bold;
			font-weight: 700;
			color: #222222;
		}
		input{
			width: 100%;
			font-size: 30rpx;
			font-family: PingFang SC, PingFang SC-Medium;
			font-weight: 500;
			text-align: left;
		}
		.value{
			width: 100%;
		}
		.iconfont{
			color: #999999;
		}
		.site{
			width:400rpx;
			font-size: 30rpx;
			font-family: PingFang SC, PingFang SC-Medium;
			font-weight: 500;
			text-align: left;
			color: #333333;
		}
	}
	textarea{
		width:100%;
		padding:30rpx 40rpx;
		box-sizing: border-box;
		background-color: #FFFFFF;
		font-size: 30rpx;
		font-family: PingFang SC, PingFang SC-Medium;
		font-weight: 500;
		text-align: left;
		color: #9e9ea6;
		line-height: 60rpx;
	}
	.block{
		width:100%;
		height:15rpx;
	}
	.btn{
		width: 690rpx;
		height: 90rpx;
		background: linear-gradient(86deg,#37bd8d 3%, #06adb9 97%);
		border-radius: 46rpx;
		font-size: 32rpx;
		font-weight: 700;
		text-align: center;
		line-height: 90rpx;
		color: #ffffff;
		position: fixed;
		bottom:44rpx;
		left:30rpx;
	}
</style>
